<template>
	<view class="root">
		<button @click="openPopup">打开添加备注弹框</button>
		<uni-popup
			class="popup"
			ref="popup" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			>
			<view class="container">
				<view class="header">
					<view class="left">
						添加备注
					</view>
					<view class="right">
						x
					</view>
				</view>
				<view class="body">
					<textarea 
						class="textarea" 
						name="" 
						id="" 
						cols="30" 
						rows="5"
						placeholder="请输入物品描述或其他要求,请勿填写敏感信息"
						>
						
					</textarea>
					<view class="count">
						0/50个字
					</view>
				</view>
				<view class="bottom">
					<button class="confirm-button">确定</button>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const popup = ref()
	
	
	
	function openPopup() {
		popup.value.open('bottom')
	}
	
</script>

<style lang="scss" scoped>
	.root {
		
		.popup {
			.container {
				position: relative;
				padding: 30rpx 30rpx 0 30rpx;
				background-color: white;
				border-radius: 50rpx;
				height: 700rpx;
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 700;
				}
				.body {
					height: 310rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #888888;
					.textarea {
						padding: 10rpx 30rpx;
						border: 1rpx solid #888888;
						width: 90%;
						border-bottom-width: 0;
					}
					.count {
						width: 90%;
						text-align: right;
						padding: 10rpx 30rpx;
						border: 1rpx solid #888888;
						border-top-width: 0;
					}
				}
				
				.bottom {
					position: absolute;
					bottom: 20%;
					left: 10%;
					.confirm-button {
						width: 600rpx;
						background-color:#2ec076;
						color: white;
					}
				}
				
			}
		}
	}
</style>